<script>
import { uniSharePlus } from '@/utils/share'
import { useUserInfoStore } from '@/stores'
import { postLike, deleteLike, postCollect, deleteCollect } from '@/api/user'
export default {
  props: {
    id: {
      type: Number,
      required: false,
    },
    user_id: {
      type: Number,
      required: false,
    },
    avatar: {
      type: String,
      default: '/static/avatar-placeholder.png', // 默认头像占位符
    },
    name: {
      type: String,
      required: false,
    },
    handle: {
      type: String,
      required: false,
    },
    time: {
      type: String,
      required: false,
    },
    content: {
      type: String,
      required: false,
    },
    isDelete: {
      type: Boolean,
      default: false,
    },
    isLiked: {
      type: Boolean,
      default: false,
    },
    isCollected: {
      type: Boolean,
      default: false,
    },
    isAction: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      // // #ifdef APP-PLUS
      // uniShare: uniSharePlus,
      // // #endif
      shareData: {
        title: '默认标题',
        path: '/pages/index/index',
        imageUrl: 'https://img-cdn-aliyun.dcloud.net.cn/stream/icon/__UNI__HelloUniApp.png',
        desc: '默认描述',
      },
      ModelContent: '确定删除该信息吗？',
      localIsLiked: this.isLiked,
      localIsCollected: this.isCollected,
      localContent: this.content,
    }
  },
  methods: {
    async avatarClick() {
      this.$emit('gotoinfo', this.user_id)
    },
    async deleteCard() {
      this.$emit('delete')
    },
    onShareAppMessage() {
      return this.shareData
    },
    cardHandle() {
      this.$emit('cardHandle')
    },
    async publish() {
      console.log('publish')
      uni.navigateTo({
        url: '/pages/message/reply?id=' + this.id,
      })
    },
    async forwarding() {
      console.log('forwarding...')
      useUserInfoStore().setPublishText(this.localContent)
      uni.navigateTo({
        url: '/pages/publish/publish',
      })
    },
    async link() {
      if (this.localIsLiked) {
        const raslut = await deleteLike(this.id)
        if (raslut.code) {
          this.localIsLiked = false
        }
      } else {
        const raslut = await postLike(this.id)
        if (raslut.code) {
          this.localIsLiked = true
        }
      }
    },
    async collect() {
      if (this.localIsCollected) {
        const raslut = await deleteCollect(this.id)
        if (raslut.code) {
          this.localIsCollected = false
        }
      } else {
        const raslut = await postCollect(this.id)
        if (raslut.code) {
          this.localIsCollected = true
        }
      }
    },
    async share() {
      console.log('share...')
      // #ifdef APP-PLUS
      uniSharePlus.show(
        {
          content: {
            // 公共的分享参数配置  类型（type）、链接（herf）、标题（title）、summary（描述）、imageUrl（缩略图）
            type: 0,
            href: 'https://www.jvlihd.cn',
            title: '爱豆APP,注册就送百万粉丝',
            summary: '爱豆APP,注册就送百万粉丝',
            imageUrl:
              'https://static.jvlihd.cn/fastapi/uploads/2024-10-30/20241030033650974624.jpg',
          },
          menus: [
            {
              img: '/static/app-plus/sharemenu/wechatfriend.png',
              text: '微信好友',
              share: {
                // 当前项的分享参数配置。可覆盖公共的配置如下：分享到微信小程序，配置了type=5
                provider: 'weixin',
                scene: 'WXSceneSession',
              },
            },
            {
              img: '/static/app-plus/sharemenu/wechatmoments.png',
              text: '微信朋友圈',
              share: {
                provider: 'weixin',
                scene: 'WXSceneTimeline',
              },
            },
            {
              img: '/static/app-plus/sharemenu/mp_weixin.png',
              text: '微信小程序',
              share: {
                provider: 'weixin',
                scene: 'WXSceneSession',
                type: 5,
                miniProgram: {
                  id: '123',
                  path: '/pages/login/index',
                  webUrl: '/#/pages/login/login',
                  type: 0,
                },
              },
            },
            {
              img: '/static/app-plus/sharemenu/weibo.png',
              text: '微博',
              share: {
                provider: 'sinaweibo',
              },
            },
            {
              img: '/static/app-plus/sharemenu/qq.png',
              text: 'QQ',
              share: {
                provider: 'qq',
              },
            },
            {
              img: '/static/app-plus/sharemenu/copyurl.png',
              text: '复制',
              share: 'copyurl',
            },
            {
              img: '/static/app-plus/sharemenu/more.png',
              text: '更多',
              share: 'shareSystem',
            },
          ],
          cancelText: '取消分享',
        },
        (e) => {
          // callback
          console.log(uniSharePlus.isShow)
          console.log(e)
        },
      )
      // #endif
      // #ifdef MP-WEIXIN
      this.shareData = {
        title: '爱豆APP,注册就送百万粉丝',
        path: '/pages/index/index?from=button2',
        imageUrl: 'https://static.jvlihd.cn/fastapi/uploads/2024-10-30/20241030033650974624.jpg',
        desc: '爱豆APP,注册就送百万粉丝',
      }
      // #endif
    },
  },
}
</script>

<template>
  <view class="tweet-card">
    <view class="tweet-header" @click="avatarClick">
      <image class="tweet-avatar" :src="avatar" />
      <view class="tweet-info">
        <text class="tweet-username">{{ name }}</text>
        <text class="tweet-handle">{{ handle }} · {{ time }}</text>
      </view>
      <!-- 增加删除按钮，靠右 -->
      <view v-if="isDelete" class="right_icons" @click="deleteCard">
        <uv-icon name="backspace" color="#999" size="28"></uv-icon>
      </view>
    </view>

    <text class="tweet-content" @click="cardHandle">{{ content }}</text>

    <view v-if="isAction" class="tweet-actions" @click.stop>
      <uv-icon class="icon" size="28px" name="chat" @click="publish"></uv-icon>
      <uv-icon class="icon" size="28px" name="share-square" @click="forwarding"></uv-icon>
      <uv-icon
        v-if="localIsLiked"
        class="icon"
        size="28px"
        name="heart-fill"
        @click="link"
      ></uv-icon>
      <uv-icon v-else class="icon" size="28px" name="heart" @click="link"></uv-icon>
      <uv-icon
        v-if="localIsCollected"
        class="icon"
        size="28px"
        name="star-fill"
        @click="collect"
      ></uv-icon>
      <uv-icon v-else class="icon" size="28px" name="star" @click="collect"></uv-icon>
      <!-- #ifdef APP-PLUS -->
      <!-- <text class="icon" @click="share">📤</text> -->
      <uv-icon class="icon" size="28px" name="share" @click="share"></uv-icon>
      <!-- #endif -->
      <!-- #ifdef MP-WEIXIN -->
      <button class="icon custom-button" open-type="share" @click="share('button1')">
        <uv-icon class="icon" size="28px" name="share"></uv-icon>
      </button>
      <!-- #endif -->
    </view>
  </view>
</template>

<style lang="scss" scoped>
.tweet-card {
  display: flex;
  flex-direction: column;
  padding: 10px;
  background-color: white;
  border-bottom: 1px solid #e0e0e0;

  .tweet-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    justify-content: space-between; /* 将左右两侧元素分开 */
    .tweet-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: #e0e0e0;
      margin-right: 10px;
    }

    .tweet-info {
      display: flex;
      flex-direction: column;
      flex: 1;

      .tweet-username {
        font-weight: bold;
        font-size: $uni-font-size-base;
      }

      .tweet-handle {
        font-size: $uni-font-size-sm;
        color: $uni-text-color-placeholder;
      }
    }
    .right_icons {
      cursor: pointer;
      display: flex;
      justify-content: flex-end; /* 确保右侧图标对齐 */
      align-items: center;
    }
  }

  .tweet-content {
    font-size: $uni-font-size-base;
    color: $uni-text-color;
    margin-bottom: 10px;
  }

  .tweet-actions {
    display: flex;
    justify-content: space-between;
    font-size: $uni-font-size-blg;
    border: none;

    .icon {
      cursor: pointer;
      padding: 0 5px;
    }
  }

  .custom-button {
    /* 去除默认样式 */
    all: unset; /* 取消 button 元素的所有默认样式 */

    /* 可以在这里添加你需要的自定义样式 */
    position: relative;
    display: inline-block;
    width: auto; /* 根据内容调整宽度，避免按钮占据整个父级容器 */
    height: auto; /* 根据内容调整高度 */
    padding: 10px 20px;
    border: none;
    // background-color: #f8f8f8;
    background-color: none !important;
    cursor: pointer;
    border-radius: $uni-border-radius-lg;
    text-align: center;
  }
  .custom-button::after {
    content: none; /* 移除伪元素的内容 */
    display: none; /* 确保伪元素不显示 */
  }
  /* 在 hover 或 active 时定义交互样式 */
  .custom-button:hover {
    // background-color: #e0e0e0;
  }
}
</style>
